(function () {
    $.fn.extend({
        innerhtml(){
            $.ajax({
                url:"/account/produList"
            }).then(function (response){
                var str=``
                console.log(response[0]);
                    str=`
                    <div class="floor1 floor iteme">
                    <div class="floor-1">
                        <h3><i></i><span> 一国一馆</span></h3>
                        <div class="con">
                            <span class="png">1F</span>
                            <ul class="clearfix">
                                <li><a href="">进口食品</a></li>
                                <li><a href="">进口零食</a></li>
                                <li><a href="">坚果干果</a></li>
                                <li><a href="">进口酒</a></li>
                                <li><a href="">饼干糕点</a></li>
                                <li><a href="">进口餐厨</a></li>
                            </ul>
                            <a href=""> <img src="./img/index/img/1607913565102.jpg" alt=""></a>
                        </div>
                    </div>
                    <div class="floor-r ">
                        <ul class="tit ">
                            <li>精彩推荐</li>
                            <li>热卖推荐</li>
                        </ul>
                        <div class="con tab">
                            <ul>
                                <li><a href="./xiangqing.html?id=${response[0].pId}"> <img class="li2" src="${response[0].pic}" alt=""></a>
                                    <div class="name">${response[0].pName}(Ferrero</div>
                                    <div class="price">￥${response[0].pPrice}</div>
                                </li>
                                <li class="li1"><a href="./xiangqing.html?id=${response[0].pId}"> <img src="./img/index/img/1608883093198.jpg" alt=""></a>
                                </li>
                                <li><a href="./xiangqing.html?id=${response[0].pId}"> <img class="li2" src="${response[0].pic}" alt=""></a>
                                    <div class="name">${response[0].pName}(Ferrero</div>
                                    <div class="price">￥${response[0].pPrice}</div>
                                </li>
                                <li><a href="./xiangqing.html?id=${response[0].pId}"> <img class="li2" src="${response[0].pic}" alt=""></a>
                                    <div class="name">${response[0].pName}(Ferrero</div>
                                    <div class="price">￥${response[0].pPrice}</div>
                                </li>
                                <li><a href="./xiangqing.html?id=${response[0].pId}"> <img class="li2" src="${response[0].pic}" alt=""></a>
                                    <div class="name">${response[0].pName}(Ferrero</div>
                                    <div class="price">￥${response[0].pPrice}</div>
                                </li>
                                <li><a href="./xiangqing.html?id=${response[0].pId}"> <img class="li2" src="${response[0].pic}" alt=""></a>
                                    <div class="name">${response[0].pName}(Ferrero</div>
                                    <div class="price">￥${response[0].pPrice}</div>
                                </li>
                                <li><a href="./xiangqing.html?id=${response[0].pId}"> <img class="li2" src="${response[0].pic}" alt=""></a>
                                    <div class="name">${response[0].pName}(Ferrero</div>
                                    <div class="price">￥${response[0].pPrice}</div>
                                </li>
                            </ul>
                        </div>
                        <div class="con tab" style="display: none;">
                            <ul>
                                <li><a href=""> <img class="li2" src="./img/index/img/716400_1_pic270_2580.jpg" alt=""></a>
                                    <div class="name">${response[0].pName}(Ferrero</div>
                                    <div class="price">￥${response[0].pPrice}</div>
                                </li>
                                <li class=""><a href=""> <img src="./img/index/img/716400_1_pic270_2580.jpg" alt=""></a>
                                    <div class="name">${response[0].pName}(Ferrero</div>
                                    <div class="price">￥${response[0].pPrice}</div>
                                </li>
                                <li><a href=""> <img class="li2" src="./img/index/img/716400_1_pic270_2580.jpg" alt=""></a>
                                    <div class="name">${response[0].pName}(Ferrero</div>
                                    <div class="price">￥${response[0].pPrice}</div>
                                </li>
                                <li><a href=""> <img class="li2" src="./img/index/img/716400_1_pic270_2580.jpg" alt=""></a>
                                    <div class="name">${response[0].pName}(Ferrero</div>
                                    <div class="price">￥${response[0].pPrice}</div>
                                </li>
                                <li><a href=""> <img class="li2" src="./img/index/img/716400_1_pic270_2580.jpg" alt=""></a>
                                    <div class="name">${response[0].pName}(Ferrero</div>
                                    <div class="price">￥${response[0].pPrice}</div>
                                </li>
                                <li><a href=""> <img class="li2" src="./img/index/img/716400_1_pic270_2580.jpg" alt=""></a>
                                    <div class="name">${response[0].pName}(Ferrero</div>
                                    <div class="price">￥${response[0].pPrice}</div>
                                </li>
                                <li><a href=""> <img class="li2" src="./img/index/img/716400_1_pic270_2580.jpg" alt=""></a>
                                    <div class="name">${response[0].pName}(Ferrero</div>
                                    <div class="price">￥${response[0].pPrice}</div>
                                </li>
                                <li><a href=""> <img class="li2" src="./img/index/img/716400_1_pic270_2580.jpg" alt=""></a>
                                    <div class="name">${response[0].pName}(Ferrero</div>
                                    <div class="price">￥${response[0].pPrice}</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="floor2 floor iteme">
                    <div class="floor-1">
                        <h3><i></i><span> 健康厨房</span></h3>
                        <div class="con">
                            <span class="png">2F</span>
                            <ul class="clearfix">
                                <li><a href="">进口食品</a></li>
                                <li><a href="">进口零食</a></li>
                                <li><a href="">坚果干果</a></li>
                                <li><a href="">进口酒</a></li>
                                <li><a href="">饼干糕点</a></li>
                                <li><a href="">进口餐厨</a></li>
                            </ul>
                            <a href=""> <img src="./img/index/img/1607913388748.jpg" alt=""></a>
                        </div>
                    </div>
                    <div class="floor-r ">
                        <ul class="tit ">
                            <li>精彩推荐</li>
                            <li>热卖推荐</li>
                        </ul>
                        <div class="con tab">
                            <ul>
                                <li><a href="./xiangqing.html?id=${response[1].pId}"> <img class="li2" src="${response[1].pic}" alt=""></a>
                                    <div class="name">${response[1].pName}(Ferrero</div>
                                    <div class="price">￥${response[1].pPrice}</div>
                                </li>
                                <li class="li1"><a href=""> <img src="./img/index/img/1608883093198.jpg" alt=""></a>
                                </li>
                                <li><a href="./xiangqing.html?id=${response[1].pId}"> <img class="li2" src="${response[1].pic}" alt=""></a>
                                    <div class="name">${response[1].pName}(Ferrero</div>
                                    <div class="price">￥${response[1].pPrice}</div>
                                </li>
                                <li><a href="./xiangqing.html?id=${response[1].pId}"> <img class="li2" src="${response[1].pic}" alt=""></a>
                                    <div class="name">${response[1].pName}(Ferrero</div>
                                    <div class="price">￥${response[1].pPrice}</div>
                                </li>
                                <li><a href="./xiangqing.html?id=${response[1].pId}"> <img class="li2" src="${response[1].pic}" alt=""></a>
                                    <div class="name">${response[1].pName}(Ferrero</div>
                                    <div class="price">￥${response[1].pPrice}</div>
                                </li>
                                <li><a href="./xiangqing.html?id=${response[1].pId}"> <img class="li2" src="${response[1].pic}" alt=""></a>
                                    <div class="name">${response[1].pName}(Ferrero</div>
                                    <div class="price">￥${response[1].pPrice}</div>
                                </li>
                                <li><a href="./xiangqing.html?id=${response[1].pId}"> <img class="li2" src="${response[1].pic}" alt=""></a>
                                    <div class="name">${response[1].pName}(Ferrero</div>
                                    <div class="price">￥${response[1].pPrice}</div>
                                </li>
                            </ul>
                        </div>
                        <div class="con tab" style="display: none;">
                            <ul>
                                <li><a href=""> <img class="li2" src="./img/index/img/675262_1_pic270_5142.jpg" alt=""></a>
                                    <div class="name">${response[1].pName}(Ferrero</div>
                                    <div class="price">￥${response[1].pPrice}</div>
                                </li>
                                <li class=""><a href=""> <img src="./img/index/img/675262_1_pic270_5142.jpg" alt=""></a>
                                    <div class="name">${response[1].pName}(Ferrero</div>
                                    <div class="price">￥${response[1].pPrice}</div>
                                </li>
                                <li><a href=""> <img class="li2" src="./img/index/img/675262_1_pic270_5142.jpg" alt=""></a>
                                    <div class="name">${response[1].pName}(Ferrero</div>
                                    <div class="price">￥${response[1].pPrice}</div>
                                </li>
                                <li><a href=""> <img class="li2" src="./img/index/img/675262_1_pic270_5142.jpg" alt=""></a>
                                    <div class="name">${response[1].pName}(Ferrero</div>
                                    <div class="price">￥${response[1].pPrice}</div>
                                </li>
                                <li><a href=""> <img class="li2" src="./img/index/img/675262_1_pic270_5142.jpg" alt=""></a>
                                    <div class="name">${response[1].pName}(Ferrero</div>
                                    <div class="price">￥${response[1].pPrice}</div>
                                </li>
                                <li><a href=""> <img class="li2" src="./img/index/img/675262_1_pic270_5142.jpg" alt=""></a>
                                    <div class="name">${response[1].pName}(Ferrero</div>
                                    <div class="price">￥${response[1].pPrice}</div>
                                </li>
                                <li><a href=""> <img class="li2" src="./img/index/img/675262_1_pic270_5142.jpg" alt=""></a>
                                    <div class="name">${response[1].pName}(Ferrero</div>
                                    <div class="price">￥${response[1].pPrice}</div>
                                </li>
                                <li><a href=""> <img class="li2" src="./img/index/img/675262_1_pic270_5142.jpg" alt=""></a>
                                    <div class="name">${response[1].pName}(Ferrero</div>
                                    <div class="price">￥${response[1].pPrice}</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="floor3 floor iteme">
                    <div class="floor-1">
                        <h3><i></i><span> 健康休闲</span></h3>
                        <div class="con">
                            <span class="png">3F</span>
                            <ul class="clearfix">
                                <li><a href="">进口食品</a></li>
                                <li><a href="">进口零食</a></li>
                                <li><a href="">坚果干果</a></li>
                                <li><a href="">进口酒</a></li>
                                <li><a href="">饼干糕点</a></li>
                                <li><a href="">进口餐厨</a></li>
                            </ul>
                            <a href=""> <img src="./img/index/img/1607913505587.jpg" alt=""></a>
                        </div>
                    </div>
                    <div class="floor-r ">
                        <ul class="tit ">
                            <li>精彩推荐</li>
                            <li>热卖推荐</li>
                        </ul>
                        <div class="con tab">
                            <ul>
                                <li><a href="./xiangqing.html?id=${response[2].pId}"> <img class="li2" src="${response[2].pic}"></a>
                                    <div class="name">${response[2].pName}(Ferrero</div>
                                    <div class="price">￥${response[2].pPrice}</div>
                                </li>
                                <li class="li1"><a href="./xiangqing.html?id=${response[2].pId}"> <img src="./img/index/img/1608883093198.jpg" alt=""></a>
                                </li>
                                <li><a href="./xiangqing.html?id=${response[2].pId}"> <img class="li2" src="${response[2].pic}"></a>
                                    <div class="name">${response[2].pName}(Ferrero</div>
                                    <div class="price">￥${response[2].pPrice}</div>
                                </li>
                                <li><a href="./xiangqing.html?id=${response[2].pId}"> <img class="li2" src="${response[2].pic}"></a>
                                    <div class="name">${response[2].pName}(Ferrero</div>
                                    <div class="price">￥${response[2].pPrice}</div>
                                </li>
                                <li><a href="./xiangqing.html?id=${response[2].pId}"> <img class="li2" src="${response[2].pic}"></a>
                                    <div class="name">${response[2].pName}(Ferrero</div>
                                    <div class="price">￥${response[2].pPrice}</div>
                                </li>
                                <li><a href="./xiangqing.html?id=${response[2].pId}"> <img class="li2" src="${response[2].pic}"></a>
                                    <div class="name">${response[2].pName}(Ferrero</div>
                                    <div class="price">￥${response[2].pPrice}</div>
                                </li>
                                <li><a href="./xiangqing.html?id=${response[2].pId}"> <img class="li2" src="${response[2].pic}"></a>
                                    <div class="name">${response[2].pName}(Ferrero</div>
                                    <div class="price">￥${response[2].pPrice}</div>
                                </li>
                            </ul>
                        </div>
                        <div class="con tab" style="display: none;">
                            <ul>
                                <li><a href=""> <img class="li2" src="./img/index/img/671825_1_pic270_4967.jpg" alt=""></a>
                                    <div class="name">${response[2].pName}(Ferrero</div>
                                    <div class="price">￥${response[2].pPrice}</div>
                                </li>
                                <li class=""><a href=""> <img src="./img/index/img/671825_1_pic270_4967.jpg" alt=""></a>
                                    <div class="name">${response[2].pName}(Ferrero</div>
                                    <div class="price">￥${response[2].pPrice}</div>
                                </li>
                                <li><a href=""> <img class="li2" src="./img/index/img/671825_1_pic270_4967.jpg" alt=""></a>
                                    <div class="name">${response[2].pName}(Ferrero</div>
                                    <div class="price">￥${response[2].pPrice}</div>
                                </li>
                                <li><a href=""> <img class="li2" src="./img/index/img/671825_1_pic270_4967.jpg" alt=""></a>
                                    <div class="name">${response[2].pName}(Ferrero</div>
                                    <div class="price">￥${response[2].pPrice}</div>
                                </li>
                                <li><a href=""> <img class="li2" src="./img/index/img/671825_1_pic270_4967.jpg" alt=""></a>
                                    <div class="name">${response[2].pName}(Ferrero</div>
                                    <div class="price">￥${response[2].pPrice}</div>
                                </li>
                                <li><a href=""> <img class="li2" src="./img/index/img/671825_1_pic270_4967.jpg" alt=""></a>
                                    <div class="name">${response[2].pName}(Ferrero</div>
                                    <div class="price">￥${response[2].pPrice}</div>
                                </li>
                                <li><a href=""> <img class="li2" src="./img/index/img/671825_1_pic270_4967.jpg" alt=""></a>
                                    <div class="name">${response[2].pName}(Ferrero</div>
                                    <div class="price">￥${response[2].pPrice}</div>
                                </li>
                                <li><a href=""> <img class="li2" src="./img/index/img/671825_1_pic270_4967.jpg" alt=""></a>
                                    <div class="name">${response[2].pName}(Ferrero</div>
                                    <div class="price">￥${response[2].pPrice}</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>`
                $(".floor-box").html(str)
                $(".floor1").tabchange()
                $(".floor2").tabchange()
                $(".floor3").tabchange()
                $(".floor").animation()
            })
            
        },
        inite() {
            var $li = this.find("#ul>li");
            let str = ``;
            for (let i = 0; i < $li.length; i++) {
                str += `<li>${i + 1}</li>`
            }
            this.find("ol").append(str)
            var $ul = this.find("#ul")
            $($li[0]).clone().appendTo($ul)
        },
        autoplay() {
            var imgindex = 0
            var olindex = 0
            var $ul = this.find("#ul")
            var self = this;
            var oli = self.find("ol li")
            $(oli[0]).addClass("current")
            var timer = setInterval(() => {
                imgindex++;
                olindex++;
                if (imgindex > 5) {
                    $ul.css("left", 0); imgindex = 1
                }
                $ul.animate({
                    left: imgindex * -770
                })
                if (olindex > 4) {
                    olindex = 0
                }
                $(oli[olindex]).addClass("current").siblings().removeClass("current")
            }, 2500);
            this.on("mouseenter", function () {
                clearInterval(timer)
            })
            var self = this
            this.find("ol li").on("click", function () {
                var $olindex = $(this).index()
                var $ul = self.find("#ul")
                var oli = self.find("ol li")
                olindex=$olindex;
                imgindex=$olindex;
                $(oli[$olindex]).addClass("current").siblings().removeClass("current")
                $ul.stop().animate({
                    left: $olindex * -770
                })   
            })   
            var timer
            this.on("mouseleave", function () {
                timer = setInterval(() => {
                    imgindex++;
                    olindex++;
                    if (imgindex > 5) {
                        $ul.css("left", 0); imgindex = 1
                    }
                    $ul.animate({
                        left: imgindex * -770
                    })
                    if (olindex > 4) {
                        olindex = 0
                    }
                    var oli = self.find("ol li")
                    $(oli[olindex]).addClass("current").siblings().removeClass("current")
                }, 1500);
            })
            
        }
        , mouseclick1() {
            this.find(".p1").on("click", function () {
                $(".p1-tab").show()
            })
            this.find(".close").on("click", function () {
                $(".p1-tab").hide()
            })
        },
        tabchange() {
            var self = this
            this.find(".tit").children().on("click", function () {
                var index = $(this).index()
                console.log(self.find(".tab").eq(index).siblings());
                self.find(".tab").eq(index).css("display", "block").siblings("div").css("display", "none")
            })
        }
        , animation() {
            this.find(".tab li .li2").on("mouseenter", function () {
                $(this).stop().animate({
                    left: 46
                })
            }).on("mouseleave", function () {
                $(this).stop().animate({
                    left: 36
                })
            })
        }
        , backtop() {
            this.find(".go-top").on("click", function () {
                $('html,body').animate({
                    scrollTop: 0
                })
            })
        },
        scroll() {
            var a = Array.from($(".iteme")).map(iteme => $(iteme).offset().top + $(iteme).height())
            var b = Array.from($(".iteme")).map(iteme => $(iteme).offset().top)
            $(window).on("scroll", _.throttle(function () {
                var wtop = $(window).scrollTop()
                var index = a.findIndex(iteme => iteme > wtop)
                if (b[0] < wtop) {
                    $(".float-nav").css("display", "block")
                    $('.total-container').slideDown()
                }
                if (b[0] > wtop) {
                    $(".float-nav").css("display", "none")
                    $('.total-container').slideUp()
                }
                if (a[2] < wtop) {
                    $(".float-nav").css("display", "none")
                }
                $(".float-nav li p").eq(index).addClass("current").parent().siblings().find("p").removeClass("current");
            }, 200))
            $(".float-nav li").on("click", function () {
                var $index = $(this).index()
                console.log($index);
                $("body,html").animate({
                    scrollTop: b[$index]
                })
            })
        },
    })
    $(function () {
        $(".all").innerhtml()
        $(".all").inite()
        $(".all").autoplay()
        $(".head").mouseclick1()
        $(".floor1").tabchange()
        $(".floor2").tabchange()
        $(".floor3").tabchange()
        $(".floor").animation()
        $(".wm-toolbar").backtop()
        $(".tolwidth").scroll()
      
    })
})()